<template>
  <el-dialog
      v-model="workstationDetailWinDialogVisible"
      title="查看工作站详情"
      width="70%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="workstation" label-width="auto">

        <el-form-item style="font-weight: bold;width: 480px;float: left;" label="工作站编码">
          <el-input v-model="workstation.workstationCode" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;margin-left: 600px" label="工作站名称">
          <el-input v-model="workstation.workstationName" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 480px;float: left;" label="工作站地址">
          <el-input v-model="workstation.workstationAddress" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 600px;margin-left: 600px" label="所在车间">
          <el-select v-model="workstation.workShopName" style="width: 250px;" disabled/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 380px;float: left;" label="所属工序">
          <el-select v-model="workstation.processName" style="width: 250px" disabled/>
        </el-form-item>


        <el-form-item style="font-weight: bold;margin-left: 600px;" label="是否启用">
          <el-radio-group v-model="workstation.workstationStatus" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="workstation.remark" type="textarea" readonly/>
        </el-form-item>

      </el-form>

    </template>
    <template #footer>
      <el-button @click="cancelDetailWorkstation">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import workstationRequest from "@/api/workstation.js";
// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelWorkstationDetail'])
// 申明组件的属性
const props = defineProps(['workstationId']);
// 弹窗标记
let workstationDetailWinDialogVisible = ref(false);
// 详情对象
let workstation = ref({});

/**
 * 取消详情按钮事件
 */
function cancelDetailWorkstation(){
  // 关闭窗体
  workstationDetailWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkstationDetail")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkstationDetail")
}

/**
 * 通过 workstationId 加载物料信息
 * @param workstationId
 */
function loadWorkstationById(workstationId){
  workstationRequest.selectById(workstationId,res=>{
    if(res.data){
      workstation.value = res.data;
      // 弹窗
      workstationDetailWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.workstationId
 * // 每次属性 props.workstationId 发生变化这里都会执行
 */
watch(()=>props.workstationId,()=>{
  // 判断 workstationId 是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.workstationId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadWorkstationById(props.workstationId);
  }
});

</script>
<style scoped>

</style>